import React from 'react';
import { FormInstance } from 'antd/lib/form';
import { Button, Form, Input, Select, Space, Switch } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { BASIC_TYPES_OPTIONS, REF_OPTIONS } from '../constant';

interface IMetaPropsEditProps {
  form: FormInstance;
  name: string;
  onAddFields?: (idx: number) => void;
}

const MetaPropsEdit = (props: IMetaPropsEditProps) => {
  const { form, name, onAddFields } = props;

  const onTypeChange = (idx: number) => {
    const _propertie = form.getFieldValue('properties');
    console.log('_propertie', _propertie, idx);
  };

  return (
    <>
      <Form.List name={name}>
        {(fields, { add, remove }) => (
          <>
            {fields.map((field, index) => {
              console.log('field', field);
              return (
                <div key={field.key}>
                  <div style={{ display: 'flex', alignItems: 'flex-end' }}>
                    <Form.Item
                      className="pr-10"
                      {...field}
                      label="属性名称"
                      name={[field.name, 'id']}
                      fieldKey={[field.fieldKey, 'key']}
                      rules={[{ required: true }]}
                    >
                      <Input />
                    </Form.Item>
                    <Form.Item {...field} className="pr-10" label="是否必填" name={[field.name, 'require']} fieldKey={[field.fieldKey, 'require']}>
                      <Switch />
                    </Form.Item>
                    <Form.Item
                      {...field}
                      label="属性类型"
                      name={[field.name, 'type']}
                      fieldKey={[field.fieldKey, 'type']}
                      rules={[{ required: true }]}
                    >
                      <Select
                        style={{ width: '120px' }}
                        options={BASIC_TYPES_OPTIONS}
                        onChange={() => {
                          onTypeChange(index);
                        }}
                      />
                    </Form.Item>

                    <div style={{ lineHeight: '88px', paddingLeft: '15px' }}>
                      <MinusCircleOutlined onClick={() => remove(field.name)} />
                    </div>

                    {onAddFields && (
                      <Form.Item style={{ flex: 1, textAlign: 'right' }}>
                        <Button
                          shape="circle"
                          size="small"
                          onClick={() => {
                            onAddFields(index);
                          }}
                          icon={<PlusOutlined />}
                        />
                      </Form.Item>
                    )}
                  </div>
                  <div>
                    <Form.Item
                      noStyle
                      shouldUpdate={(prevValues, currentValues) => {
                        return (
                          prevValues?.[name][index]?.type !== currentValues?.[name][index]?.type ||
                          prevValues?.[name][index]?.items !== currentValues?.[name][index]?.items
                        );
                      }}
                    >
                      {({ getFieldValue }) => {
                        const _properties = getFieldValue(name);
                        switch (_properties[index]?.type) {
                          case 'ref':
                            return (
                              <div style={{ border: '1px solid #d9d9d9', padding: '10px', marginBottom: '10px' }}>
                                <Form.Item
                                  {...field}
                                  label="Ref"
                                  name={[field.name, 'refId']}
                                  fieldKey={[field.fieldKey, 'refId']}
                                  rules={[{ required: true }]}
                                >
                                  <Select style={{ width: '180px' }} options={REF_OPTIONS} />
                                </Form.Item>
                              </div>
                            );
                          case 'array':
                            return (
                              <div
                                style={{ border: '1px solid #d9d9d9', borderRadius: '5px', padding: '10px', marginBottom: '10px', display: 'flex' }}
                              >
                                <Form.Item
                                  {...field}
                                  label="Array"
                                  className="pr-10"
                                  name={[field.name, 'items', 'type']}
                                  fieldKey={[field.fieldKey, 'items', 'type']}
                                  rules={[{ required: true }]}
                                >
                                  <Select style={{ width: '180px' }} options={BASIC_TYPES_OPTIONS} />
                                </Form.Item>
                                {_properties && _properties[index]?.items?.type === 'ref' && (
                                  <Form.Item
                                    {...field}
                                    label="Ref"
                                    name={[field.name, 'items', 'refId']}
                                    fieldKey={[field.fieldKey, 'items', 'refId']}
                                    rules={[{ required: true }]}
                                  >
                                    <Select style={{ width: '180px' }} options={REF_OPTIONS} />
                                  </Form.Item>
                                )}
                              </div>
                            );
                          case 'enum':
                            return (
                              <div style={{ border: '1px solid #d9d9d9', padding: '10px', marginBottom: '10px' }}>
                                <Form.List name={[field.name, 'enum']}>
                                  {(enumFields, operation) => (
                                    <>
                                      {enumFields.map((enumField) => (
                                        <Space key={`enumField-${enumField.key}`} align="baseline">
                                          <Form.Item
                                            {...field}
                                            className="pr-10"
                                            label="Enum"
                                            name={[enumField.name, 'value']}
                                            fieldKey={[enumField.fieldKey, 'value']}
                                            rules={[{ required: true }]}
                                          >
                                            <Input />
                                          </Form.Item>
                                          <MinusCircleOutlined onClick={() => operation.remove(enumField.name)} />
                                        </Space>
                                      ))}

                                      <Form.Item>
                                        <Button type="dashed" onClick={() => operation.add()} icon={<PlusOutlined />}>
                                          添加Enum
                                        </Button>
                                      </Form.Item>
                                    </>
                                  )}
                                </Form.List>
                              </div>
                            );
                          default:
                            return null;
                        }
                      }}
                    </Form.Item>
                  </div>
                </div>
              );
            })}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                {tr(`添加${name}名称`)}
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
    </>
  );
};

export default MetaPropsEdit;
